<template>
  <div class="login-box">
    <div class="tupian">
      <img
        src="http://www.shuiyue.info:21100/static/media/login.9d2700c2.png"
        alt=""
      />
    </div>
    <div class="content">
      <p class="title">用户登录</p>
      <div>
        <el-input
          v-model="id"
          placeholder="请输入用户账号"
          class="zh"
        ></el-input>
      </div>
      <div>
        <el-input
          v-model="pass"
          type="password"
          show-password
          placeholder="请输入用户密码"
          class="mm"
        ></el-input>
      </div>
      <el-checkbox>记住密码</el-checkbox>
      <div>
        <el-button type="primary" class="dl" @click="loginEvt">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { loginApi, menuListApi, userInfoApi } from "@/apis/login";
import { enmd5Api } from "@/utile/crypto";
import { shopList } from "@/apis/shelves";
// import router from "@/router/index"
import store from "@/store";
import { useRouter } from "vue-router";
const id = ref("");
const pass = ref("");
const router = useRouter();
const loginEvt = async () => {
  // 登录接口
  const { code, token } = await loginApi({
    id: id.value,
    password: enmd5Api(pass.value),
  });
  console.log(code, token);
  if (code === 200) {
    store.commit("settoken", token);
    sessionStorage.setItem("token", token);
    console.log(store.getters.token);
    // 菜单接口
    const { code, data: rows } = await menuListApi();

    const { data } = await userInfoApi({ id: id.value });
    const a = await shopList();
    // console.log(data);
    console.log(rows.rows);
    console.log(a);
    store.commit("setMenuList", rows.rows);
    store.commit("setInfo", data);
    console.log(store.getters.Info.name);
    // console.log(router);
    router.push("/home");
  }
};
</script>

<style lang="less" scoped>
.login-box {
  width: 750px;
  height: 400px;
  display: block;
  position: absolute;
  // height: 50%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  border: 1px solid #000;
  padding-right: 50px;
}
.zh {
  width: 300px;
  height: 35px;
  margin-top: 80px;
}
.mm {
  width: 300px;
  height: 35px;
  margin-top: 25px;
  margin-bottom: 20px;
}
.dl {
  width: 300px;
  margin-top: 20px;
}
img {
  width: 400px;
  height: 400px;
}
.content {
  width: 300px;
  height: 200px;
  float: right;
}
.tupian {
  float: left;
}
.title {
  text-align: center;
}
</style>
